<template>
  <div class="box">
    <div class="tbox">
      <img
        src="../../assets/images/cz1.png"
        alt=""
        class="timg1"
        @click="goback"
      />
      <span class="tfont">{{ $t("long.ubenweiheyuelishi") }}</span>
      <img
        v-show="active <= 1"
        @click="showOrderSearch"
        class="timg2"
        src="../../assets/images/screen.png"
        alt=""
      />
      <img
        v-show="active == 3"
        @click="showTimeBox"
        class="timg2"
        src="../../assets/images/calendar.png"
        alt=""
      />
    </div>
    <div class="sfix">
      <van-tabs
        v-model="active"
        title-inactive-color="#8992AE"
        title-active-color="#fff"
        line-width="20"
        line-height="2"
        color="#0a7aff"
      >
        <van-tab :title="$t('long.lishiweituo')"></van-tab>
        <van-tab :title="$t('long.zhiyingsun')"></van-tab>
        <van-tab :title="$t('common.lishichengjiao')"></van-tab>
        <van-tab :title="$t('common.zijinliushui')"></van-tab>
      </van-tabs>
      <div class="vbox">
        <div class="v1" @click="showContractList">
          <div class="vfont">{{ $t("common.heyue") }}：</div>
          <div class="vfont">{{ hyText }}</div>
          <img class="vimg" src="../../assets/images/xia.png" alt="" />
        </div>
        <div class="v1" v-show="active == 0" @click="orderTypeShow = true">
          <div class="vfont">{{ $t("common.leixing") }}：</div>
          <div class="vfont">{{ orderType }}</div>
          <img class="vimg" src="../../assets/images/xia.png" alt="" />
        </div>
        <div class="v1" v-show="active == 3" @click="fundTypeShow = true">
          <div class="vfont">{{ $t("common.leixing") }}：</div>
          <div class="vfont">{{ fundType }}</div>
          <img class="vimg" src="../../assets/images/xia.png" alt="" />
        </div>
      </div>
    </div>

    <div class="main">
      <div class="ubox" v-if="active <= 1">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="$t('long.meiyougengduo')"
          @load="getOrderList"
          :immediate-check="false"
        >
          <div class="lbox" v-for="item in orderList" :key="item.id">
            <Order :curyType="curyType" :detail="item" :isTrade="1" />
          </div>
        </van-list>
      </div>
      <div class="ubox" v-if="active == 2">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="$t('long.meiyougengduo')"
          @load="getTradeList"
          :immediate-check="false"
        >
          <div class="lbox" v-for="item in tradeList" :key="item.id">
            <Order :curyType="curyType" :detail="item" :isTrade="2" />
          </div>
        </van-list>
      </div>
      <div class="ubox" v-if="active == 3">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="$t('long.meiyougengduo')"
          @load="getFundRateList"
          :immediate-check="false"
        >
          <div class="lbox" v-for="item in fundList" :key="item.id">
            <Order :curyType="curyType" :detail="item" :isTrade="3" />
          </div>
        </van-list>
      </div>
    </div>

    <van-action-sheet
      v-model="orderTypeShow"
      :actions="orderTypeActions"
      @select="chooseOrderType"
      :round="false"
    />
    <van-action-sheet
      v-model="fundTypeShow"
      :actions="fundTypeActions"
      @select="chooseFundType"
      :round="false"
    />
    <OrderSearch
      ref="orderSearch"
      @changeSymbol="changeSymbol"
      @refreshGetList="refreshGetList"
    />
  </div>
</template>

<script>
import OrderSearch from "./components/orderSearch.vue";
import Order from "./components/order.vue";
export default {
  components: {
    Order,
    OrderSearch,
  },
  data() {
    return {
      curyType: "token",
      allOSList: [],
      chooseSymbolId: "",
      orderList: [],
      tradeList: [],
      fundList: [],
      pageNum: 1,
      orderTypeShow: false,
      fundTypeShow: false,
      hyText: this.$t('common.quanbu'),
      fundType: this.$t('common.quanbu'),
      orderType: this.$t('common.quanbu'),
      active: 0,
      loading: false,
      finished: true,
    };
  },
  activated() {
    this.initLang()
    this.active = 0;
    this.curyType = this.$route.query.curyType;
    this.reset();
    this.getOptionSymbolList();
    this.orderTypeActions[0].color =
        "rgb(10, 122, 255)";
  },
  computed: {
    fundTypeActions() {
      return [
        { name: this.$t("common.quanbu"), color: "rgb(10, 122, 255)" },
        { name: this.$t("long.yishixianyingkui") },
        { name: this.$t("long.zijinfeiyong") },
        { name: this.$t("long.shouxufei") },
        { name: this.$t("long.baocangqingsuan") },
      ];
    },
    orderTypeActions(){
      return [
        { name: this.$t("common.quanbu"), color: "rgb(10, 122, 255)" },
        { name: this.$t("long.xianjiadan") },
        { name: this.$t("long.shijiadan") },
        { name: this.$t("long.qiangpingdan")}
      ]
    }
  },
  watch: {
    chooseSymbolId(val) {
      this.reset();
    },
    active(val) {
      this.reset();
    },
    orderType(val) {
      this.reset();
    },
    fundType(val) {
      this.reset();
    },
  },
  methods: {
    initLang(){
      this.hyText = this.$t('common.quanbu')
      this.fundType = this.$t('common.quanbu')
      this.orderType = this.$t('common.quanbu')
    },
    reset() {
      this.pageNum = 1;
      this.loading = false;
      this.finished = false;
      this.orderList = [];
      this.tradeList = [];
      this.fundList = [];
      if (this.active <= 1) {
        this.getOrderList();
      } else if (this.active == 2) {
        this.getTradeList();
      } else if (this.active == 3) {
        this.getFundRateList();
      }
    },
    refreshGetList() {
      this.reset();
    },
    changeSymbol(item) {
      console.log(item);
      this.chooseSymbolId = item.symbolId;
      this.hyText = item.symbolName;
    },
    showContractList() {
      this.$refs.orderSearch.allOSList = this.allOSList;
      this.$refs.orderSearch.oldOSList = this.allOSList;
      this.$refs.orderSearch.hyshow = true;
    },
    async getOptionSymbolList() {
      const ret = await this.$http({
        url: "/contract/contractOptionalSymbol/list",
        method: "post",
        data: {
          orderName: 0, //名称排序 0 升序 1 降序  null 不排序
          orderSumPrice: 1, //成交量排序 0 升序 1 降序  null 不排序
          orderLastPrice: null, //最新价排序 0 升序 1 降序  null 不排序
          orderRiseAndFallRange: null, //涨跌幅排序 0 升序 1 降序  null 不排序
          type: "all", //查询类型  是否查询当前登陆人所选的币对 ，false -> 查全部
        },
      });
      if (ret.data.code === 0) {
        this.allOSList = ret.data.data;
        this.allOSList.unshift({
          symbolName: this.$t("common.quanbu"),
          symbolId: "",
        });
      }
    },
    showTimeBox() {
      this.$refs.orderSearch.sxreset();
      this.$refs.orderSearch.timeshow1 = true;
    },
    showOrderSearch() {
      //   this.$refs.orderSearch.sxreset();
      this.$refs.orderSearch.show = true;
    },
    chooseOrderType(item) {
      this.orderTypeActions.forEach((v) => {
        v.color = "#8992AE";
      });
      this.orderTypeActions.find((v) => v.name == item.name).color =
        "rgb(10, 122, 255)";
      this.orderType = item.name;
      this.orderTypeShow = false;
    },
    chooseFundType(item) {
      this.fundTypeActions.forEach((v) => {
        v.color = "#8992AE";
      });
      this.fundTypeActions.find((v) => v.name == item.name).color =
        "rgb(10, 122, 255)";
      this.fundType = item.name;
      this.fundTypeShow = false;
    },
    async getOrderList() {
      this.loading = true;
      let url =
        this.active == 1
          ? "/contract/app/stoporder/history/page"
          : "/contract/app/order/history/page";
      let types = null;
      if (this.orderType == this.$t("common.quanbu")) {
        types = [0, 1, 2];
      } else if (this.orderType == this.$t("long.xianjiadan")) {
        types = [1];
      } else if (this.orderType == this.$t("long.shijiadan")) {
        types = [0];
      } else if (this.orderType == this.$t("long.qiangpingdan")) {
        types = [2];
      }
      let leftdate = this.$refs.orderSearch.leftdate;
      let rightdate = this.$refs.orderSearch.rightdate;
      let sxstatus = this.$refs.orderSearch.sxstatus;
      let sxside = this.$refs.orderSearch.sxside;

      const ret = await this.$http({
        url,
        method: "post",
        data: {
          symbolId: this.chooseSymbolId,
          pageNum: this.pageNum,
          pageSize: 100,
          startTime: leftdate,
          endTime: rightdate,
          status: sxstatus,
          side: sxside,
          type: types,
        },
      });
      if (ret.data.code === 0) {
        this.loading = false;
        this.orderList = this.orderList.concat(ret.data.data.records);
        this.pageNum++;
        if (this.orderList.length >= +ret.data.data.total) {
          this.finished = true;
        }
      }
    },
    async getTradeList() {
      this.loading = true;
      const ret = await this.$http({
        url: "/contract/app/trade/page/history",
        method: "get",
        params: {
          symbolId: this.chooseSymbolId,
          current: this.pageNum,
          size: 100,
        },
      });
      if (ret.data.code === 0) {
        this.loading = false;
        this.tradeList = this.tradeList.concat(ret.data.data.records);
        this.pageNum++;
        if (this.tradeList.length >= +ret.data.data.total) {
          this.finished = true;
        }
      }
    },
    async getFundRateList() {
      this.loading = true;
      let businessType = "";
      if (this.fundType == "全部") {
        businessType = "";
      } else {
        if (this.fundType == "已实现盈亏") {
          businessType = 0;
        }
        if (this.fundType == "资金费用") {
          businessType = 1;
        }
        if (this.fundType == "手续费") {
          businessType = 2;
        }
        if (this.fundType == "爆仓清算") {
          businessType = 3;
        }
      }
      let qsdatez = this.$refs.orderSearch.qsdatez;
      let jsdatez = this.$refs.orderSearch.jsdatez;
      const ret = await this.$http({
        url: "/wallet/contractaccountdetail/page",
        method: "get",
        params: {
          businessType: businessType,
          startTime: qsdatez,
          endTime: jsdatez,
          current: this.pageNum,
          size: 100,
          symbolId: this.chooseSymbolId,
        },
      });
      if (ret.data.code === 0) {
        this.loading = false;
        this.fundList = this.fundList.concat(ret.data.data.records);
        this.pageNum++;
        if (this.fundList.length >= +ret.data.data.total) {
          this.finished = true;
        }
      }
    },
    goback() {
      localStorage.setItem("zh", 2);
      this.$router.go("-1");
    },
  },
};
</script>

<style lang="scss" scoped>
.tbox {
  width: 100vw;
  height: 45px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #090A1B;
  .timg1 {
    position: absolute;
    top: 3vw;
    left: 2vw;
    width: 5.33vw;
    height: 5.33vw;
  }
  .tfont {
    font-size: 4.8vw;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .timg2 {
    width: 5vw;
    position: absolute;
    top: 3.6vw;
    right: 4vw;
  }
}
.main {
  padding: 130px 0 10vw;
  min-height: 100vh;
  background-color: #090A1B;
}
::v-deep .van-tabs__nav {
  background-color: #090A1B !important;
}
::v-deep .van-action-sheet {
  background-color: #090A1B !important;
}
::v-deep .van-action-sheet__cancel,
.van-action-sheet__item {
  background-color: #090A1B !important;
  padding: 4vw 0 !important;
  font-size: 3.7vw;
  color: #8992AE;
  border-bottom: 1px solid rgb(51, 53, 64);
}

.vbox {
  display: flex;
  padding: 0 3vw 0 4vw;
  height: 10vw;
  align-items: center;
  border-top: 1px solid #171A2B;
  border-bottom: 1px solid #171A2B;
  .v1 {
    display: flex;
    align-items: center;
    margin-right: 3vw;
    .vfont {
      font-size: 3.2vw;
      color: #8992AE;
      margin-right: 1vw;
    }
    .vimg {
      width: 3vw;
      position: relative;
      top: -1.4px;
    }
  }
}
.sfix {
  position: fixed;
  top: 45px;
  left: 0;
  width: 100%;
  background-color: #090A1B;
}
</style>